<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
  <link rel="stylesheet" href="../../styles/common.css"/>
  <link rel="stylesheet" href="../../styles/page.css"/>
</head>
<body>
  <div class="dashboard-container" id="order-app">
    <div class="container">
      <div class="tableBar">
        <el-input v-model.trim="input" placeholder="请输入订单号" style="width: 250px"
                  clearable @keyup.enter.native="handleQuery">
          <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="handleQuery"></i>
        </el-input>
        <el-date-picker v-model="orderTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至" start-placeholder="开始日期时间" end-placeholder="结束日期时间"
                        :picker-options="pickerOptions" :default-time="['00:00:00', '23:59:59']"
                        style="margin-left: 20px">
        </el-date-picker>
        <el-button type="primary" class="search-btn" @click="handleQuery" style="margin-left: 20px">查询</el-button>
      </div>
      <el-table :data="tableData" class="tableBox" height="425">
        <el-table-column prop="number" label="订单号码" align="center"></el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            <span>{{getStatus(scope.row.status)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsNum" label="商品数量" align="center"></el-table-column>
        <el-table-column label="实收金额" align="center">
          <template slot-scope="scope">
            <span>￥ {{scope.row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderTime" label="订单时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" class="blueBug" @click="viewDetails(scope.row)">查看</el-button>
            <el-button v-if="scope.row.status===2" type="text" class="blueBug" @click="changeStatus(3,scope.row.id)">接单</el-button>
            <el-button v-if="scope.row.status===3" type="text" class="blueBug" @click="changeStatus(4,scope.row.id)">派送</el-button>
            <el-button v-if="scope.row.status===4" type="text" class="blueBug" @click="changeStatus(5,scope.row.id)">完成</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        :current-page.sync="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog title="订单信息" :visible.sync="dialogVisible" width="50%" center>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单商品</span>
        </div>
        <div v-for="(item,index) in dialogData.details" :key="index" class="text item">
          <span class="name">{{item.name}}</span>
          <span class="configNumber">{{item.config}} ×{{item.number}}</span>
          <span class="amount">￥ {{item.amount}}</span>
        </div>
      </el-card>
      <el-descriptions title="订单信息" :column="1" v-if="dialogData.address">
        <el-descriptions-item label="收货人">{{dialogData.address.consignee}}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{dialogData.address.phone}}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{dialogData.address.district}} {{dialogData.address.detail}}</el-descriptions-item>
        <el-descriptions-item v-if="dialogData.remark" label="订单备注">{{dialogData.remark}}</el-descriptions-item>
        <el-descriptions-item label="订单号码">{{dialogData.number}}</el-descriptions-item>
        <el-descriptions-item label="支付方式">{{getPayMethod(dialogData.payMethod)}}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{getStatus(dialogData.status)}}</el-descriptions-item>
        <el-descriptions-item label="订单时间">{{dialogData.orderTime}}</el-descriptions-item>
        <el-descriptions-item v-if="dialogData.payTime" label="支付时间">{{dialogData.payTime}}</el-descriptions-item>
        <el-descriptions-item v-if="dialogData.receiveTime" label="接单时间">{{dialogData.receiveTime}}</el-descriptions-item>
        <el-descriptions-item v-if="dialogData.deliverTime" label="派送时间">{{dialogData.deliverTime}}</el-descriptions-item>
        <el-descriptions-item v-if="dialogData.finishTime" label="完成时间">{{dialogData.finishTime}}</el-descriptions-item>
        <el-descriptions-item v-if="dialogData.cancelTime" label="取消时间">{{dialogData.cancelTime}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../../plugins/axios/axios.min.js"></script>
  <script src="../../js/request.js"></script>
  <script src="../../api/order.js"></script>
  <script>
    new Vue({
      el: '#order-app',
      data() {
        return {
          input: '',
          orderTime: [],
          beginTime: '',
          endTime: '',
          counts: 0,
          page: 1,
          pageSize: 10,
          tableData: [],
          dialogVisible: false,
          dialogData: {}
        }
      },
      computed: {
        pickerOptions() {
          return {
            shortcuts: [{
              text: '今天',
              onClick(picker) {
                const end = new Date()
                const year = end.getFullYear()
                const month = end.getMonth()
                const day = end.getDate()
                const start = new Date(year, month, day, 0, 0, 0)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '昨天',
              onClick(picker) {
                const date = new Date(new Date().getTime() - 3600 * 1000 * 24)
                const year = date.getFullYear()
                const month = date.getMonth()
                const day = date.getDate()
                const start = new Date(year, month, day, 0, 0, 0)
                const end = new Date(year, month, day, 23, 59, 59)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              }
            }]
          }
        }
      },
      watch: {
        orderTime(value) {
          this.getStartEndTime(value)
        }
      },
      created() {
        this.getPageInfo()
        this.init()
      },
      methods: {
        init () {
          const params = {
            page: this.page,
            pageSize: this.pageSize,
            number: this.input ? this.input : undefined,
            beginTime: this.beginTime ? this.beginTime : undefined,
            endTime: this.endTime ? this.endTime : undefined
          }
          getOrderPageApi(params).then(res => {
            const records = res.data.records
            records.forEach(order => {
              let goodsNum = 0
              order.details.forEach(detail => goodsNum += detail.number)
              order.goodsNum = goodsNum
              let address = order.address
              order.address.district = address.provinceName + address.cityName + address.districtName
            })
            this.tableData = records
            this.counts = res.data.total
          }).catch(error => {
            this.$message.error(error.message)
          })
        },

        // 获取订单状态
        getStatus(status) {
          let str
          switch (status) {
            case 1:
              str = '待付款'
              break
            case 2:
              str = '已支付'
              break
            case 3:
              str = '已接单'
              break
            case 4:
              str = '派送中'
              break
            case 5:
              str = '已完成'
              break
            case 6:
              str = '已取消'
              break
          }
          return str
        },

        // 获取支付方式
        getPayMethod(payMethod) {
          let str = ''
          switch (payMethod) {
            case 1:
              str = '微信支付'
              break
            case 2:
              str = '支付宝字符'
              break
          }
          return str
        },

        // 查看详情
        viewDetails(row) {
          this.dialogVisible = true
          this.dialogData = {...row}
        },

        // 获取开始日期时间和结束日期时间
        getStartEndTime(orderTime) {
          if (orderTime && orderTime.length >= 2) {
            this.beginTime = orderTime[0]
            this.endTime = orderTime[1]
          } else {
            this.beginTime = ''
            this.endTime = ''
          }
        },

        // 修改订单状态 - 接单、派送、完成
        changeStatus(status, id) {
          this.$confirm('确认更改该订单状态?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            editOrderApi({id, status}).then(res => {
              switch (status) {
                case 3:
                  this.$message.success('接单成功')
                  break
                case 4:
                  this.$message.success('派送成功')
                  break
                case 5:
                  this.$message.success('订单已完成')
                  break
              }
              this.init()
            }).catch(error => {
              this.$message.error(`${error.message}，操作失败`)
            })
          }).catch(() => {})
        },

        handleQuery() {
          this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
          this.pageSize = val
          this.init()
          this.savePageInfo()
        },
        handleCurrentChange(val) {
          this.page = val
          this.init()
          this.savePageInfo()
        },
        savePageInfo() {
          sessionStorage.setItem("pageInfo", JSON.stringify({
            page: this.page,
            pageSize: this.pageSize,
            input: this.input,
            orderTime: this.orderTime
          }))
        },
        getPageInfo() {
          let pageInfo = sessionStorage.getItem("pageInfo")
          if (pageInfo) {
            pageInfo = JSON.parse(pageInfo)
            this.page = pageInfo.page
            this.pageSize = pageInfo.pageSize
            this.input = pageInfo.input
            this.orderTime = pageInfo.orderTime
            this.getStartEndTime(this.orderTime)
          }
        }
      }
    })
  </script>
</body>
</html>